<template>
    <div class="container">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="企业介绍" name="企业介绍">
                    <div class="container">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="联系人：" prop="supplierName">
                                    <el-input placeholder="请输入内容" v-model.trim="ruleForm.liaisonName" style="width:300px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="联系人电话：" prop="area">
                                    <el-input placeholder="请输入内容" v-model.trim="ruleForm.phone" style="width:300px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="企业介绍：" prop="supplierName" label-width="140px">
                                    <div ref="editor" style="width:100%	;"></div>
                                </el-form-item>		
                            </el-col>	
                        </el-row>
                    </div>  
                </el-tab-pane>
                <el-tab-pane label="证件证书" name="证件证书">
                     <div class="container">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="企业LOGO：">
                                    <el-upload
                                        class="upload-poster"                               
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :on-change="imgPreview"
                                            :auto-upload="false">
                                            <img v-if="logoImg" :src="logoImg" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    jpg、png、gif格式，60x60像素，不超过2MB
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="企业资质证书：">
                           <el-button @click="addedlicense">添加</el-button>
                        </el-form-item>
                        <el-form-item label="" style="width:450px;" >
                            <div v-for="(item,index) in ruleForm.materialList" :key="index"  style="border-radius:4px; border:1px solid #dcdfe6;padding:10px;position:relative;height:110px;margin-bottom:10px;">
                                <div  style="width:100px;height:100px;border:1px solid #dcdfe6;border-radius:4px;" @click="checklist(item,index)">
									<img :src="item.materialImg1" v-if="item.materialImg1 != '' && item.materialImg1 != undefined" alt="" style="width:100px;height:100px;border:1px solid #dcdfe6;">
                                    <img :src="$store.state.imageUrls + item.materialImg" v-else alt="" style="width:100px;height:100px;border:1px solid #dcdfe6;">
                                </div>
                                 <div style="position:absolute; top:2px; right:10px;cursor:pointer;" @click="deletelist(index)">x</div> 
                                <div style="position:absolute;top:30px;left:120px;width:150px;overflow:hidden;white-space:nowrap;" @click="checklist(item,index)">
                                    <div>{{item.name}}</div>
                                    <div style="color:#c0c4cc;">{{item.deadline}}</div>
                                </div>
                            </div>
                        </el-form-item>
                    </div>  
                </el-tab-pane>
                 <el-tab-pane label="上市持有人" name="上市持有人">
                    <div >
                        <div class="container">
                            <h3>产品信息</h3>
                            <el-row class="demo-ruleForm">
                                <el-col :span="10">
                                    <el-form-item label="企业简称：" prop="abbreviation">
                                        <el-input v-model.trim="companyMarket.abbreviation" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="所在区域：">
                                        <el-cascader size="large" :options="options" v-model="area1" style="width:300px;" @change="handleChange1"></el-cascader>
                                    </el-form-item>
                                    <el-form-item label="营业执照：" v-if="licenseImg1 == ''" style="width:500px">
                                        <el-button @click="certificate2">添加</el-button>
                                    </el-form-item>
                                    <el-form-item label="营业执照：" v-else style="width:500px">
                                        <el-button @click="certificate2">修改</el-button>
                                    </el-form-item>
                                    <el-form-item label="" style="width:450px;" v-if="licenseImg1 != ''">
                                        <div style="border-radius:4px; border:1px solid #dcdfe6;padding:10px;position:relative;height:110px;">
                                            <img :src="licenseImg1" alt="" style="width:100px;height:100px;border:1px solid #dcdfe6;border-radius:4px;">
                                            <div style="position:absolute;top:30px;left:120px;width:150px;overflow:hidden;white-space:nowrap;">
                                                <!-- <div></div> --> 
                                                <div>{{companyMarket.societyCode}}</div>
                                                <div style="color:#c0c4cc;">{{companyMarket.term}}</div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="14">
                                    <el-form-item label="企业名称：" prop="name">
                                        <el-input v-model.trim="companyMarket.name" style="width:300px"></el-input>
                                    </el-form-item>
                                    
                                    <el-form-item label="注册地址：" style="width:500px">
                                        <el-input v-model.trim="companyMarket.region" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="生产证书：" style="width:500px" v-if="permitImg1==''">
                                        <el-button @click="certificate3" >添加</el-button>  
                                    </el-form-item>
                                    <el-form-item label="生产证书：" style="width:500px" v-else>
                                        <el-button @click="certificate3">修改</el-button>  
                                    </el-form-item>
                                    <el-form-item label="" style="width:450px;" v-if="permitImg1!=''">
                                        <div style="border-radius:4px; border:1px solid #dcdfe6;padding:10px;position:relative;height:110px;" >
                                            <img :src="permitImg1" alt="" style="width:100px;height:100px;border:1px solid #dcdfe6;border-radius:4px;">
                                            <div style="position:absolute;top:30px;left:120px;width:150px;overflow:hidden;white-space:nowrap;">
                                                <div>{{companyMarket.permitCode}}</div>
                                                <div style="color:#c0c4cc;">{{companyMarket.permitTerm}}</div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="container" style="margin-top:20px">
                            <h3 style="margin-bottom: 20px">法人信息</h3>
                            <el-row class="demo-ruleForm">
                                <el-col :span="10">
                                    <el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
                                        <upload-img ref="uploadChang3" :maxNum="1" :files='listUrl3' style="width:300px"></upload-img>
                                    </el-form-item>
                                    <el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
                                        <upload-img ref="uploadChang4" :maxNum="1" :files='listUrl4' style="width:300px"></upload-img>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="14">
                                
                                    <el-form-item label="法人代表：">
                                        <el-input v-model.trim="companyMarket.legalName" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="身份证号：">
                                        <el-input v-model.trim="companyMarket.legalID" style="width:300px"></el-input>
                                    </el-form-item> 
                                    
                                     <el-form-item label="营业期限：">
                                        <el-date-picker
                                            value-format="yyyy/MM/dd"
                                            format="yyyy/MM/dd"
                                            style="width:300px"
                                            v-model="value5"
                                            type="daterange"
                                            :disabled="disabled5"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                        </el-date-picker>

                                        <el-checkbox style="margin-left:10px;" v-model="checked5" @change="changeState5">长期</el-checkbox>
                                    </el-form-item> 
                                    <el-form-item label="手机号：" style="width:500px">
                                        <el-input v-model.trim="companyMarket.legalPhone" style="width:300px"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>  
                    </div>
                </el-tab-pane>
                <el-tab-pane label="生产企业" name="生产企业">
                    <div >
                        <div class="container">
                            <h3>产品信息</h3>
                            <el-row class="demo-ruleForm">
                                <el-col :span="10">
                                    <el-form-item label="企业简称：" prop="abbreviation">
                                        <el-input v-model.trim="ruleForm.abbreviation" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="所在区域：">
                                        <el-cascader size="large" :options="options" v-model="area" style="width:300px;" @change="handleChange"></el-cascader>
                                    </el-form-item>
                                    <el-form-item label="营业执照：" style="width:500px" v-if="licenseImg ==''">
                                        <!-- <upload-img ref="uploadChang" :maxNum="1" :files='listUrl' style="width:300px"></upload-img> -->
                                        <el-button @click="certificate1" >添加</el-button>
                                    </el-form-item>
                                    <el-form-item label="营业执照：" style="width:500px" v-else>
                                        <!-- <upload-img ref="uploadChang" :maxNum="1" :files='listUrl' style="width:300px"></upload-img> -->
                                        <el-button @click="certificate1" >修改</el-button>
                                    </el-form-item>
                                    <el-form-item label="" style="width:450px;" v-if="licenseImg !=''">
                                        <div style="border-radius:4px; border:1px solid #dcdfe6;padding:10px;position:relative;height:110px;margin-bottom:10px;">
                                            <img :src="licenseImg" alt="" style="width:100px;height:100px;border:1px solid #dcdfe6;border-radius:4px;">
                                            <div style="position:absolute;top:30px;left:120px;width:150px;overflow:hidden;white-space:nowrap;">
                                                <div>{{ruleForm.societyCode}}</div>
                                                <div style="color:#c0c4cc;">{{ruleForm.term}}</div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="联系方式：">
                                        <!-- <upload-img ref="uploadChang" :maxNum="1" :files='listUrl' style="width:300px"></upload-img> -->
                                        <el-input v-model.trim="ruleForm.telephone" style="width:300px"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="14">
                                    <el-form-item label="生产企业：" prop="name">
                                        <el-input v-model.trim="ruleForm.name" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="生产地址：" style="width:500px">
                                        <el-input v-model.trim="ruleForm.region" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="生产证书：" style="width:500px" v-if="permitImg ==''">
                                        <el-button @click="certificate" >添加</el-button>
    
                                    </el-form-item>
                                    <el-form-item label="生产证书：" style="width:500px" v-else>
                                        <el-button @click="certificate" >修改</el-button>
    
                                    </el-form-item>
                                    <el-form-item label="" style="width:450px;" v-if="permitImg !=''">
                                        <div style="border-radius:4px; border:1px solid #dcdfe6;padding:10px;position:relative;height:110px;">
                                            <img :src="permitImg" alt="" style="width:100px;height:100px;border:1px solid #dcdfe6;border-radius:4px;">
                                            <div style="position:absolute;top:30px;left:120px;width:150px;overflow:hidden;white-space:nowrap;">
                                                <div>{{ruleForm.permitCode}}</div>
                                                <div style="color:#c0c4cc;">{{ruleForm.permitTerm}}</div>
                                            </div>
                                        </div>
                                    </el-form-item>
              
                                </el-col>
                            </el-row>
                        </div>
                        <div class="container" style="margin-top:20px">
                            <h3 style="margin-bottom: 20px">法人信息</h3>
                            <el-row class="demo-ruleForm">
                                <el-col :span="10">
                                    <el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
                                        <upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img>
                                    </el-form-item>
                                    <el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
                                        <upload-img ref="uploadChang2" :maxNum="1" :files='listUrl2' style="width:300px"></upload-img>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="14">
                                
                                    <el-form-item label="法人代表：">
                                        <el-input v-model.trim="ruleForm.legalName" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="身份证号：">
                                        <el-input v-model.trim="ruleForm.legalID" style="width:300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="营业期限：">
                                            <el-date-picker
                                                value-format="yyyy/MM/dd"
                                                format="yyyy/MM/dd"
                                                style="width:300px"
                                                v-model="value"
                                                type="daterange"
                                                :disabled="disabled"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期">
                                            </el-date-picker>
                                           <el-checkbox style="margin-left:10px;" v-model="checked" @change="changeState">长期</el-checkbox>
                                    </el-form-item>
                                    <el-form-item label="手机号：" style="width:500px">
                                        <el-input v-model.trim="ruleForm.legalPhone" style="width:300px"></el-input>
                                    </el-form-item>
                                    
                                </el-col>
                            </el-row>
                        </div>  
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-dialog title="生产证书" :visible.sync="addeddialog" width="800px">
                <el-form :model="form" style="margin-left:30px;" label-width="120px">
                    <el-form-item label="证书图片：">
                        <el-upload
                            class="upload-poster"                               
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-change="imgPreview1"
                            :auto-upload="false">
                            <img v-if="permitImg" :src="permitImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="编号：">
                        <el-input v-model.trim="ruleForm.permitCode" autocomplete="off" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限：">
                            <el-date-picker
                                value-format="yyyy/MM/dd"
                                format="yyyy/MM/dd"
                                style="width:300px"
                                v-model="value2"
                                type="daterange"
                                :disabled="disabled2"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                         <el-checkbox style="margin-left:10px;" v-model="checked2" @change="changeState2">长期</el-checkbox>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addeddialog = false">取 消</el-button>
                    <el-button type="primary" @click="addlower">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="生产证书" :visible.sync="addeddialog4" width="800px">
                <el-form :model="form" style="margin-left:30px;" label-width="120px">
                    <el-form-item label="证书图片：">
                        <el-upload
                            class="upload-poster"                               
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-change="imgPreview4"
                                :auto-upload="false">
                                <img v-if="permitImg1" :src="permitImg1" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="编号：">
                        <el-input v-model.trim="companyMarket.permitCode" autocomplete="off" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限：">
                            <el-date-picker
                                value-format="yyyy/MM/dd"
                                format="yyyy/MM/dd"
                                style="width:300px"
                                v-model="value4"
                                type="daterange"
                                :disabled="disabled4"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                         <el-checkbox style="margin-left:10px;" v-model="checked4" @change="changeState4">长期</el-checkbox>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addeddialog4 = false">取 消</el-button>
                    <el-button type="primary" @click="addlower4">确 定</el-button>
                </div>
            </el-dialog>


            <el-dialog title="营业执照" :visible.sync="addeddialog2" width="800px">
                <el-form :model="form" style="margin-left:30px;" label-width="120px">
                    <el-form-item label="证书图片：">
                        <el-upload
                            class="upload-poster"                               
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-change="imgPreview3"
                                :auto-upload="false">
                                <img v-if="licenseImg1" :src="licenseImg1" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="统一代码：">
                        <el-input v-model.trim="companyMarket.societyCode" autocomplete="off" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限：">
                            <el-date-picker
                                value-format="yyyy/MM/dd"
                                format="yyyy/MM/dd"
                                style="width:300px"
                                v-model="value3"
                                type="daterange"
                                :disabled="disabled3"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                         <el-checkbox style="margin-left:10px;" v-model="checked3" @change="changeState3">长期</el-checkbox>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addeddialog2 = false">取 消</el-button>
                    <el-button type="primary" @click="addlower2">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="营业执照" :visible.sync="addeddialog1" width="800px">
                <el-form :model="form" style="margin-left:30px;" label-width="120px">
                    <el-form-item label="证书图片：">
                        <el-upload
                            class="upload-poster"                               
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-change="imgPreview2"
                                :auto-upload="false">
                                <img v-if="licenseImg" :src="licenseImg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="统一代码：">
                        <el-input v-model.trim="ruleForm.societyCode" placeholder="请输入" autocomplete="off" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限：">
                        <!-- <el-col :span="15" > -->
                            <el-date-picker
                                value-format="yyyy/MM/dd"
                                format="yyyy/MM/dd"
                                style="width:300px"
                                v-model="value1"
                                type="daterange"
                                :disabled="disabled1"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        <!-- </el-col> -->
                        <el-checkbox style="margin-left:10px;" v-model="checked1" @change="changeState1">长期</el-checkbox>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addeddialog1 = false">取 消</el-button>
                    <el-button type="primary" @click="addlower1">确 定</el-button>
                </div>
            </el-dialog>
<!-- 企业资质证书 -->
            <el-dialog title="企业资质证书" :visible.sync="xslicense" width="800px">
                <el-form :model="form" style="margin-left:30px;" label-width="120px">
                    <el-form-item label="证书图片：">
                        <el-upload
                            class="upload-poster"                               
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-change="uploading"
                                :auto-upload="false">
                                <img v-if="materialImg1" :src="materialImg1" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="证书名称：">
                        <el-input v-model.trim="zsname" placeholder="请输入" autocomplete="off" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限：">
                        <el-date-picker
                            value-format="yyyy/MM/dd"
                            format="yyyy/MM/dd"
                            style="width:300px"
                            v-model="value7"
                            type="daterange"
                            :disabled="disabled7"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-checkbox style="margin-left:10px;" v-model="checked7" @change="changeState7">长期</el-checkbox>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="xslicense = false">取 消</el-button>
                    <el-button type="primary" @click="close">确 定</el-button>
                </div>
            </el-dialog>
            
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitRules('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {company_findById,company_update} from '@/request/api'
import {regionData,CodeToText } from 'element-china-area-data'
import uploadImg from '../../../common/uploadImg';
import E from 'wangeditor';
    export default {
        inject:['reload'],
        components: {
            uploadImg
        },
        data() {
            return {
                materialImg1:'',
                materialImg:'',
                zsname:'',
                index:'',
                files:'',
                xslicense:false,
                addeddialog4:false,
                addeddialog2:false,
                area1:'',
                disabled2:false,
                disabled1:false,
                disabled3:false,
                disabled5:false,
                disabled4:false,
                disabled7:false,
                value7:false,
                checked7:false,
                scimg:'',
                licenselist:[
                    
                ],
                addeddialog1:false,
                addeddialog:false,
                permitImg1:'',
                certificateDisabled2:false,
                certificateDisabled3:false,
                certificateDisabled:false,
                certificateDisabled1:false,
                disabled:false,
                
                checked6:'',
                value:'',
                value1:'',
                value2:'',
                value3:'',
                value4:'',
                value5:'',
                activeName:'企业介绍',
                form:{},
                imageUrl:'',
                options: regionData,
                area: '',
                showForm: false,
                isDisabled: false,
                checked:false,
                checked1:false,
                checked2:false,
                checked3:false,
                checked4:false,
                checked5:false,
                logoImg:'',
                permitImg:'',
                licenseImg:'',
                licenseImg1:'',
                materialList:[
                    
                ],
                companyMarket:{
                    permitCode:'',
                    phone:'',//联系人电话
                    liaisonName:'',//联系人
                    introduce:'',//企业介绍
                    logoImg:'',//企业logo
                    oldLogoImg:'',//替换掉的企业logo
                    files:'',
                    name:'',//公司名称
                    abbreviation:'',//公司简称
                    region:'',//注册地址
                    address:'',//所属区域
					permitTerm:'',
                    societyCode:'',//社会信用代码
                    term:'',//经营范围
                    legalName:'',//法人代表
                    legalPhone:'',//法人电话
                    legalID:'',//法人身份证号
                    legalTime:'',//法人证件期限
                    operateName:'',//运营人代表
                    operatePhone:'',//运营人电话
                    operateTime:'',//运营人期限
                    operateID:'',//运营人身份证号
                    licenseImg:'',//公司执照
                    oldLicenseImg:'',//旧公司执照
                    legalImg:'',//法人信息 法人代表身份证正面
                    oldLegalImg:'',//旧的
                    legalIDImg:'',//背面
                    oldLegalIDImg:'',//旧的
                }, 
                ruleForm: {
                    companyMarket:'',              
                    permitCode:'',
                    phone:'',//联系人电话
                    liaisonName:'',//联系人
                    introduce:'',//企业介绍
                    logoImg:'',//企业logo
                    oldLogoImg:'',//替换掉的企业logo
                    files:'',
                    files1:'',
                    files2:'',
                    files3:'',
                    files4:'',
                    name:'',//公司名称
                    abbreviation:'',//公司简称
                    region:'',//注册地址
                    address:'',//所属区域
                    societyCode:'',//社会信用代码
                    term:'',//经营范围
                    legalName:'',//法人代表
                    legalPhone:'',//法人电话
                    legalID:'',//法人身份证号
                    legalTime:'',//法人证件期限
                    operateName:'',//运营人代表
                    operatePhone:'',//运营人电话
                    operateTime:'',//运营人期限
                    operateID:'',//运营人身份证号
                    licenseImg:'',//公司执照
                    oldLicenseImg:'',//旧公司执照
                    legalImg:'',//法人信息 法人代表身份证正面
                    oldLegalImg:'',//旧的
                    legalIDImg:'',//背面
                    oldLegalIDImg:'',//旧的
                },
                rules:{},
                listUrl: '',
                listUrl1: '',
                listUrl2: '',
                listUrl3: '',
                listUrl4: '',
                listUrls1:'',
                listUrls2:'',
                list:'',
                id:''
            };
        },
        mounted(){
            this.id = this.$route.query.id
            this.init()
          
            var editor = new E(this.$refs.editor)
            editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
            editor.customConfig.uploadFileName = 'file';
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                  
                    var url =  "http://" + window.location.host + "/file/show/" +  result.data
                    insertImg(url)

                }
            }
	        editor.customConfig.onchange = (html) => {
                this.ruleForm.introduce = html
            }
	        editor.create();
	        editor.txt.html(this.ruleForm.introduce)
        },
        methods: {
            deletelist(index){
            
                this.ruleForm.materialList.splice(index,1)
                
            },
            checklist(item,index){
               
                this.xslicense = true
                this.materialImg1 = this.$store.state.imageUrls + item.materialImg
                this.zsname = item.name
                if(item.deadline != "永久"){
                    var srr = item.deadline.split("至")
                    this.value7 = srr
                    this.disabled7 = false
                }else{
                    this.value7 = ""
                    this.checked7 = true 
                    this.disabled = true
                }
                // this.deadline = item.deadline

            },
            close(){
                this.xslicense = false
                if(this.zsname == ""){
                     this.$notify({
                        title: '提示',
                        message: '证书名不能为空',
                        type: 'info'
                    });
                    return false
                }
                if(this.materialImg == ""){
                     this.$notify({
                        title: '提示',
                        message: '证书图片不能为空',
                        type: 'info'
                    });
                    return false
                }
                
                // }else{
                    if(this.checked7 == true){
                        this.deadline = "永久"  
                    }else{
                        if(this.value7 == ""){

                        }else{
                            this.deadline = this.value7[0] + "至" + this.value7[1]
                        }
                    }
                // }
                this.ruleForm.materialList.push({
					type:1,
                    materialImg1:this.materialImg1,
                    name:this.zsname,
                    materialImg:this.materialImg,
                    deadline:this.deadline,
                    files:this.files
                })
				for(var i=0;i<this.ruleForm.materialList.length;i++){
					
				}
               
            },
            addedlicense(){
                this.zsname = ""
                this.materialImg1 = ""
                this.value7 = ""
                this.xslicense = true
                
            },
            certificate(){
                this.addeddialog = true
            },
            certificate1(){
                this.addeddialog1 = true
            },
            certificate2(){
                this.addeddialog2 = true
            },
            certificate3(){
                this.addeddialog4 = true
            },
            addlower(){
                this.addeddialog = false
            },
            addlower1(){
                this.addeddialog1 = false
            },
            addlower2(){
                this.addeddialog2 = false
            },
            // addlower3(){
            //     this.addeddialog3 = false
            // },
            addlower4(){
                this.addeddialog4 = false
            },
            changeState1(){
                if(this.checked1 == false){
                    this.disabled1 = false
                }else{
                    this.disabled1 = true
                    this.value1 = ""
                }
            },
            changeState7(){
                if(this.checked7 == false){
                    this.disabled7 = false
                }else{
                    this.disabled7 = true
                    this.value7 = ""
                }  
            },
            changeState2(){
                if(this.checked2 == false){
                    this.disabled2 = false
                }else{
                    this.disabled2= true
                    this.value2 = ""
                }
            },
            changeState5(){
                if(this.checked5 == false){
                    this.disabled5 = false
                }else{
                    this.disabled5= true
                    this.value5 = ""
                }
            },
            changeState3(){
                if(this.checked3 == false){
                    this.disabled3 = false
                }else{
                    this.disabled3 = true
                    this.value3 = ""
                }
            },
            changeState4(){
                if(this.checked4 == false){
                    this.disabled4 = false
                }else{
                    this.disabled4 = true
                    this.value4 = ""
                }
            },
            changeState(){
                if(this.checked == false){
                    this.disabled = false
                }else{
                    this.disabled = true
                    this.value = ""
                }
            },
            imgmaterial(index){
               
            },
            handleClick(tab, event) {
            },
            init(){
                
                company_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    this.companyMarket 
					var arr = JSON.parse(res.data.companyMarket)
					if(arr == null || arr == "" || arr == undefined){
						this.companyMarket = this.companyMarket
					}else{
						this.companyMarket = arr
					}
                   
                    this.area1 =  this.companyMarket.address.split(",")
                    this.area = res.data.address.split(",")
                
/*
生产企业

*/
                    // 生产企业营业执照期限
					
					if(this.ruleForm.trem != ""){
						if(this.ruleForm.term != "永久"){
							 var srr = res.data.term.split("至")
							this.value1 = srr
							this.disabled1 = false
						}else{
							this.value1 = ""
							this.checked1 = true 
							this.disabled1 = true
						}
					}
                    
					if(this.ruleForm.legalTime != ""){
						if(this.ruleForm.legalTime != "永久"){
							 var srr1 = res.data.legalTime.split("至")
							this.value = srr1
							this.disabled = false
						}else{
							this.value = ""
							this.checked = true 
							this.disabled = true
						}
					}
					
                    
                    

                    
                    // 生产企业生产证书期限
					if(this.ruleForm.permitTerm != ""){
						if(this.ruleForm.permitTerm != "永久"){
							var srr2 = res.data.permitTerm.split("至")
							this.value2 = srr2
							this.disabled2 = false
						}else{
							this.value2 = ""

							this.checked2 = true 
							this.disabled2 = true
						}
					}
                    


  
                    for (let i = 0; i < res.data.materialList.length; i++) {
                        res.data.materialList[i].oldMaterialImg = res.data.materialList[i].materialImg
                        
                    }
                    //生产证书
                    this.ruleForm.oldPermitImg = res.data.permitImg
                    if(this.ruleForm.permitImg == "" || this.ruleForm.permitImg == null){
                        this.ruleForm.permitImg = this.ruleForm.permitImg
                    }else{
                        this.permitImg = this.$store.state.imageUrls + this.ruleForm.permitImg
                    }


                    //logo
                    this.ruleForm.oldLogoImg = res.data.logoImg
                    if(this.ruleForm.logoImg == "" || this.ruleForm.logoImg == null){
                        this.ruleForm.logoImg = this.ruleForm.logoImg
                    }else{
                        this.logoImg = this.$store.state.imageUrls + this.ruleForm.logoImg
                    }
                    //营业执照
                    this.ruleForm.oldLicenseImg = res.data.licenseImg
                    if(this.ruleForm.licenseImg == "" || this.ruleForm.licenseImg == null){
                        this.ruleForm.licenseImg = this.ruleForm.licenseImg
                    }else{
                        this.licenseImg = this.$store.state.imageUrls + this.ruleForm.licenseImg
                    }

                    
                    //法人信息  身份证正面
                    this.ruleForm.oldLegalImg = res.data.legalImg
                    const arr1 = this.ruleForm.legalImg.split(";")
                    if(arr1 == ""){

                    }else{
                        this.listUrl1 = arr1.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                    
                    //法人信息  身份背面
                    this.ruleForm.oldLegalIDImg = res.data.legalIDImg
                    const arr2 = this.ruleForm.legalIDImg.split(";")
                    if(arr2 == ""){

                    }else{
                        this.listUrl2 = arr2.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                    
/*
上市持有人

*/

                    //法人信息  身份证正面
                    this.companyMarket.oldLegalImg = this.companyMarket.legalImg
                    const arr3 = this.companyMarket.legalImg.split(";")
                    if(arr3 == ""){

                    }else{
                        this.listUrl3 = arr3.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                    
                    //法人信息  身份背面
                    this.companyMarket.oldLegalIDImg = this.companyMarket.legalIDImg
                    const arr4 = this.companyMarket.legalIDImg.split(";")
                    if(arr4 == ""){

                    }else{
                        this.listUrl4 = arr4.map(t =>{
                            var obj = {}
                            obj.url =this.$store.state.imageUrls + t
                            obj.name = this.$store.state.imageUrls + t
                            return obj
                        })
                    }
                   if(this.companyMarket.term != ""){
					   if(this.companyMarket.term != "永久"){
                        
							 var srr3 = this.companyMarket.term.split("至")
							this.value3 = srr3
							this.disabled3 = false
						}else{
							
							this.value3 = ""
							this.checked3 = true 
							this.disabled3 = true
						}
				   }
					if(this.companyMarket.permitTerm != "" && this.companyMarket.permitTerm != undefined){
						if(this.companyMarket.permitTerm != "永久"){
							var srr4 = this.companyMarket.permitTerm.split("至")
							this.value4 = srr4
							this.disabled4 = false
						}else{
							this.value4 = ""
							this.checked4 = true 
							this.disabled4 = true
						}
					}
                    if(this.companyMarket.legalTime != ""){
						if(this.companyMarket.legalTime != "永久"){
							var srr5 = this.companyMarket.legalTime.split("至")
							this.value5 = srr5
							this.disabled5 = false
						}else{
							this.value5 = ""
							this.checked5 = true 
							this.disabled5 = true
						}
					}
                    
                    this.companyMarket.oldLicenseImg = this.companyMarket.licenseImg
                    if(this.companyMarket.licenseImg == "" || this.companyMarket.licenseImg == null){
                        this.companyMarket.licenseImg = this.companyMarket.licenseImg
                    }else{
                        this.licenseImg1 = this.$store.state.imageUrls + this.companyMarket.licenseImg
                    }

                    this.companyMarket.oldPermitImg = this.companyMarket.permitImg
                    if(this.companyMarket.permitImg == "" || this.companyMarket.permitImg == null){
                        this.companyMarket.permitImg = this.companyMarket.permitImg
                    }else{
                        this.permitImg1 = this.$store.state.imageUrls + this.companyMarket.permitImg
                    }

                 
                    var editor = new E(this.$refs.editor)
                    editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
                    editor.customConfig.uploadFileName = 'file';
                    editor.customConfig.uploadImgHooks = {
                        customInsert: function (insertImg, result, editor) {
                           
                            var url =  "http://" + window.location.host + "/file/show/" +  result.data
                            insertImg(url)
                        }
                    }
                    editor.customConfig.onchange = (html) => {
                        this.ruleForm.introduce = html
                    }
                    editor.create();
                    editor.txt.html(this.ruleForm.introduce)
                })
            },

            handleChange(value) {
                this.ruleForm.address = value.toString()
            },
            handleChange1(value){
                this.companyMarket.address = value.toString()
            },
            submitRules(formName){
                
                if(this.checked1 == true){
                   this.ruleForm.term = "永久"  
                }else{
                    if(this.value1 == ""){

                    }else{
                        this.ruleForm.term = this.value1[0] + "至" + this.value1[1]
                    }
                }


                if(this.checked == true){
                   this.ruleForm.legalTime = "永久"  
                }else{
                    if(this.value == ""){

                    }else{
                        this.ruleForm.legalTime = this.value[0] + "至" + this.value[1]
                    }
                }

                if(this.checked2 == true){
                   this.ruleForm.permitTerm = "永久"  
                }else{
                    if(this.value2 == ""){

                    }else{
                        this.ruleForm.permitTerm = this.value2[0] + "至" + this.value2[1]
                    }
                }

                if(this.checked3 == true){
                   this.companyMarket.term = "永久"  
                }else{
                    if(this.value3 == ""){

                    }else{
                        this.companyMarket.term = this.value3[0] + "至" + this.value3[1]
                    }
                }
                
                if(this.checked4 == true){
                   this.companyMarket.permitTerm = "永久"  
                }else{
                    if(this.value4 == ""){

                    }else{
                        this.companyMarket.permitTerm = this.value4[0] + "至" + this.value4[1]
                    }
                }

                if(this.checked5 == true){
                   this.companyMarket.legalTime = "永久"  
                }else{
                    if(this.value5 == ""){

                    }else{
                        this.companyMarket.legalTime = this.value5[0] + "至" + this.value5[1]
                    }
                }

                //营业执照
                let formdata = new FormData()


                if(this.ruleForm.files1 != "" && this.ruleForm.files1 != null && this.ruleForm.files1 != undefined){
                    formdata.append("files",this.ruleForm.files1)
                }
                if(this.ruleForm.files2 != "" && this.ruleForm.files2 != null && this.ruleForm.files2 != undefined){
                    formdata.append("files",this.ruleForm.files2)
                }
                if(this.ruleForm.files3 != "" && this.ruleForm.files3 != null && this.ruleForm.files3 != undefined){
                    formdata.append("files",this.ruleForm.files3)
                }
                if(this.ruleForm.files4 != "" && this.ruleForm.files4 != null && this.ruleForm.files4 != undefined){
                    formdata.append("files",this.ruleForm.files4)
                }
                //法人信息  身份证正面
                var imgurls1 = this.$refs.uploadChang1.fileList
                var arr1 = ""
                for(var i=0;i<imgurls1.length;i++){
                    if(imgurls1[i].status != "success"){
                        formdata.append("files",imgurls1[i].raw)
                    }
                    arr1 += imgurls1[i].name + ';'
                }
                var str1 = arr1.substr(0,arr1.length-1)
                this.ruleForm.legalImg = str1.substring(str1.lastIndexOf("/")+1)
                //法人信息 身份证背面
                var imgurls2 = this.$refs.uploadChang2.fileList
                var arr2 = ""
                for(var i=0;i<imgurls2.length;i++){
                    if(imgurls2[i].status != "success"){
                        formdata.append("files",imgurls2[i].raw)
                    }
                    arr2 += imgurls2[i].name + ';'
                }
                var str2 = arr2.substr(0,arr2.length-1)
                this.ruleForm.legalIDImg = str2.substring(str2.lastIndexOf("/")+1)

                //法人信息  身份证正面
                var imgurls3 = this.$refs.uploadChang3.fileList
                var arr3 = ""
                for(var i=0;i<imgurls3.length;i++){
                    if(imgurls3[i].status != "success"){
                        formdata.append("files",imgurls3[i].raw)
                    }
                    arr3 += imgurls3[i].name + ';'
                }
                var str3 = arr3.substr(0,arr3.length-1)
                this.companyMarket.legalImg = str3.substring(str3.lastIndexOf("/")+1)

                //法人信息 身份证背面
                var imgurls4 = this.$refs.uploadChang4.fileList
                var arr4 = ""
                for(var i=0;i<imgurls4.length;i++){
                    if(imgurls4[i].status != "success"){
                        formdata.append("files",imgurls4[i].raw)
                    }
                    arr4 += imgurls4[i].name + ';'
                }
                var str4 = arr4.substr(0,arr4.length-1)
                this.companyMarket.legalIDImg = str4.substring(str4.lastIndexOf("/")+1)
                for (let i = 0; i < this.ruleForm.materialList.length; i++) {
                    if(this.ruleForm.materialList[i].files != "" && this.ruleForm.materialList[i].files != null && this.ruleForm.materialList[i].files != undefined){
                        formdata.append("files",this.ruleForm.materialList[i].files)
                    }
                }
                this.ruleForm.companyMarket = JSON.stringify(this.companyMarket)
                this.ruleForm.materials = JSON.stringify(this.ruleForm.materialList)
                for(var a in this.ruleForm){
                    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
                        this.ruleForm[a] = ""
                        formdata.append(a,'') 
                    }else{
                        formdata.append(a,this.ruleForm[a])
                    }
                }
                this.$confirm('是否确认提交', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    company_update(formdata).then((res)=>{
                        this.$notify({
                            title: '操作成功',
                            message: '保存成功',
                            type: 'success'
                        });
                        this.init()
                        this.reload()

                    })
                }).catch(() => {
                    this.$notify({
                        title: '提示',
                        message: '已取消保存',
                        type: 'info'
                    });         
                });
            },

            submitForm() {
 
            },

            beforeAvatarUpload(file){

            },
            uploading(file,fileList) {
                this.materialImg1 =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.files = file.raw
                    this.materialImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            },
            imgPreview4(file,fileList) {
                this.permitImg1 =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files4 = file.raw
                    this.companyMarket.permitImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            }, 
            imgPreview3(file,fileList) {
                this.licenseImg1 =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files3 = file.raw
                    this.companyMarket.licenseImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            }, 
            imgPreview2(file,fileList) {
                this.licenseImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files2 = file.raw
                    this.ruleForm.licenseImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            }, 
            imgPreview1(file,fileList) {
                this.permitImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files = file.raw
                    this.ruleForm.permitImg = file.name
					// console.log(this.ruleForm)
                } else {
                    this.$message.error('请选择图片文件');
                }
				
            }, 
            imgPreview(file,fileList) {
                this.logoImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files = file.raw
                    this.ruleForm.logoImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            },     
        }
    }
</script>
<style scoped>

.demo-ruleForm{
    margin-top: 20px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>


